<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta name="format-detection" content="telephone=no" />
  <title>认证绑卡</title>
  <link rel="stylesheet" href="../../css/reset.css" />
  <style>
    body {
      width: 100%;
      background-color: #fff;
      font-size: 0.26rem;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      font-family: Helvetica;
      color: #333333;
      height: auto;
    }

    .uppicture {
      width: 100%;
      display: flex;
      display: -webkit-flex;
      flex-direction: column;
      align-items: center;
    }

    .uppicture div {
      margin-bottom: 0.35rem;
    }

    .nextbutton {
      width: 6.84rem;
      height: 0.9rem;
      line-height: 0.9rem;
      text-align: center;
      background-color: #ffd203;
      outline: none;
      border: none;
      border-radius: 0.1rem;
      margin-left: calc((100% - 6.84rem) / 2);
      font-size: 0.28rem;
    }

    .tips {
      height: 1rem;
      line-height: 1rem;
      width: 100%;
      padding: 0 0.3rem;
      box-sizing: border-box;
    }
  </style>
</head>

<body>
  <p class="tips">请上传身份证正反面</p>
  <div class="uppicture">
    <div class="force" data-flag="idCardfront">
      <img src="../../image/userup.png" style="width:5.16rem;height: 3.44rem;" id="idCardfront" data-path="" />
    </div>
    <div class="reverse" data-flag="idCardreverse">
      <img src="../../image/userbackx.png" style="width:5.16rem;height: 3.44rem;" id="idCardreverse" data-path="" />
    </div>
    <div>
      <p>
        请确保照片的内容完整并清晰可见，<br />
        仅支持JPG和PNG图片格式，图片大小小于2M。
      </p>
    </div>
  </div>
  <button class="nextbutton">提交</button>
</body>

</html>
<script src="../../script/autosize.js"></script>
<script src="../../script/jquery_three_two_one.js"></script>
<script src="../../script/app.js"></script>
<script>
  apiready = function () {
    var app = new APP();
    var account = app.getAccount();
    var imgWidth = app.W * 0.85;
    var imgHeight = app.accDiv(imgWidth, 1.58);
    var typeChooseNew = "idcard";
    // app.log('页面参数+++++++++++++++++++', api.pageParam)
    var userName = api.pageParam.userName;
    var userCardNumber = api.pageParam.userCardNumber;
    var userEngName = api.pageParam.engName;
    var goMyPage = api.pageParam.goMyPage;
    var goAddMoney = api.pageParam.goAddMoney ? true : 'false';
    var typeChoose = 1; //1身份证 2护照 3台胞证
    if (api.pageParam.type == "idCard") {
      typeChoose = 1;
    }
    if (api.pageParam.type == "passport") {
      typeChoose = 2;
      $(".reverse").hide();
      $("#idCardfront").attr("src", "../../image/userotherx.png");
      $(".tips").text("请上传证件图片")
    }
    if (api.pageParam.type == "otherport") {
      typeChoose = 3;
      $(".reverse").hide();
      $("#idCardfront").attr("src", "../../image/userotherx.png");
      $(".tips").text("请上传证件图片")
    }

    function openPirtrue(thiz) {
      app.sheet({
        buttons: ["拍照", "相册"],
        cancelTitle: "取消"
      }, function (ret, err) {
        app.trigger("selectPic");
        var index = ret.buttonIndex;
        app.log("index", index);
        if (index == 1) {
          //拍照
          app.shootPic(function (ret, err) {
            app.log("shoot", ret);
            // 图片裁剪
            if (ret && ret.data) {
              app.openImgHandle({
                type: typeChooseNew,
                flag: $(thiz).data("flag"),
                srcPath: ret.data,
                dimension: [imgWidth, imgHeight]
              });
            }
          });
          return;
        }
        if (index == 2) {
          //相册
          app.getPic(function (ret, err) {
            // 图片裁剪
            if (ret && ret.data) {
              app.log("get", ret);
              app.openImgHandle({
                type: typeChooseNew,
                flag: $(thiz).data("flag"),
                srcPath: ret.data,
                dimension: [imgWidth, imgHeight]
              });
            }
          });
        }
      }
      );
    }
    //更换头像
    $(".force").click(function () {
      var thiz = this;
      openPirtrue(thiz);
    });
    $(".reverse").click(function () {
      var thiz = this;
      openPirtrue(thiz);
    });
    app.listen("compress_image_success", function (ret, err) {
      app.log("压缩事件chankan", JSON.stringify(ret));
      if (ret.value.flag && ret.value.imgUrl) {
        var retCopy = ret;
        app.uploadImg(ret.value.imgUrl, function (ret) {
          if (ret.code == 200) {
            var vupImgHttpUrl = ret.data.files;
            $("#" + retCopy.value.flag).data("path", vupImgHttpUrl.path).attr("src", vupImgHttpUrl.url);
          } else {
            app.toast(ret.message);
          }
        })
      }
    });
    $(".nextbutton").on("click", function () {
      if (typeChoose == 0 && $("#idCardfront").data("path") == "") {
        app.toast("请上传身份证正面图片");
        return;
      }
      if (typeChoose == 0 && $("#idCardreverse").data("path") == "") {
        if ($("#idCardfront").data("path") == "") {
          app.toast("请上传身份证反面图片");
          return;
        }
      }
      if (typeChoose == 1 && $("#idCardfront").data("path") == "") {
        if ($("#idCardfront").data("path") == "") {
          app.toast("请上传证件图片");
          return;
        }
      }
      if (typeChoose == 2 && $("#idCardfront").data("path") == "") {
        if ($("#idCardfront").data("path") == "") {
          app.toast("请上传证件图片");
          return;
        }
      }
      if (goAddMoney == true) {
        app.ajax({
          param: {
            method: "post",
            url: app.ajaxUrl + "member/authenticate",
            data: {
              values: {
                token: account.token,
                name: userName,
                id_num: userCardNumber,
                en_name: userEngName ? userEngName : "",
                id_photo_1: $("#idCardfront").data("path"),
                id_photo_2: $("#idCardreverse").data("path"),
                type: typeChoose
              }
            },
            callback: function (ret, err) {
              if (ret.code == 200) {
                app.toast('提交成功');
                app.trigger('goMain');
              } else {
                app.toast(ret.message);
              }
            }
          }
        });
        return;
      }
      app.ajax({
        param: {
          method: "post",
          url: app.ajaxUrl + "member/authenticate",
          data: {
            values: {
              token: account.token,
              name: userName,
              id_num: userCardNumber,
              en_name: userEngName ? userEngName : "",
              id_photo_1: $("#idCardfront").data("path"),
              id_photo_2: $("#idCardreverse").data("path"),
              type: typeChoose
            }
          },
          callback: function (ret, err) {
            app.log("auth", "提交返回：" + JSON.stringify(ret));
            if (ret.code == 200) {
              // 发送认证成功提交成功消息
              if (goAddMoney == true) {
                app.toast('提交成功');
                setTimeout(function (params) {
                  app.theart(500, function () {
                    app.toWin('littlemoneyrecharge_headerwin');
                  });
                }, 1000)
                return;
              }
              app.trigger("auth_commit_success");
              app.toast("上传成功");
              if (goMyPage == true) {
                app.openWin({
                  name: "safetyset",
                  url: app.hd + "my/safetyset.html",
                  pageParam: {
                    goMyPage: true
                  },
                  slidBackEnabled: false
                })
              } else {
                app.toWin("safetyset");
              }
            } else if (ret.code == 0 && ret.statusCode == 500) {
              app.toast("网络链接失败")
            } else {
              app.toast(ret.message);
            }
          }
        },
        extra: {
          isflower: true
        }
      });
    });
    app.listen("commit_successful", function () {
      app.closeW();
    });
    app.listen("goMain", function () {
      app.closeW();
    })
    app.headerMap();
  };
</script>